<template>
  <div v-if="searchVisible" style="margin-bottom:15px">
    <el-form ref="search" :size="size" inline class="searchForm">
      <el-form-item v-for="item in searchForm" :key="item.prop">
        <!--单选框-->
        <el-input
          v-if="item.type==='Input'"
          v-model="searchData[item.prop]"
          :style="'width:'+item.width"
          :placeholder="item.label"
        />
        <!--下拉框-->
        <el-select
          v-if="item.type==='Select'"
          v-model="searchData[item.prop]"
          :style="'width:'+item.width"
          :placeholder="item.label"
          clearable
        >
          <el-option v-for="(vo,i) in item.data" :key="i" :label="vo.key" :value="vo.val" />
        </el-select>

        <Treeselect
          v-if="item.type==='treeSelect'"
          v-model="searchData[item.prop]"
          :default-expand-level="1"
          :style="'width:'+item.width"
          :options="item.data"
          :normalizer="normalizer"
          :show-count="true"
          :placeholder="item.label"
        />

        <!--时间区间-->
        <el-date-picker
          v-if="item.type==='datetime'"
          v-model="searchData[item.prop]"
          value-format="yyyy-MM-dd"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :size="size" icon="el-icon-search" @click="search">查询</el-button>
        <el-button :size="size" icon="el-icon-refresh" @click="searchReset">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Search',
  components: {
    Treeselect
  },
  props: {
    labelWidth: {
      type: String,
      default: '100px'
    },
    size: {
      type: String,
      default: 'mini'
    },
    searchForm: {
      type: Array,
      default: () => []
    },
    searchVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      searchData: {}
    }
  },
  methods: {
    search() {
      //this.searchData.is_search = 1
      this.$emit('update:searchData', this.searchData)
      this.$emit('refesh_list')
    },
    normalizer(data) {
      if (data.children && !data.children.length) {
        delete data.children
      }
      return {
        id: data.val,
        label: data.key,
        children: data.children
      }
    },
    searchReset() {
      this.searchData = {}
      this.$emit('refesh_list', [])
    }
  }
}
</script>
<style scoped>
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 5px
  }

  .searchForm .el-form-item__label,
  .searchForm label {
    font-weight: normal;
  }
</style>
